import { useContext } from "react";

import { AppContext } from './appContext';
import { IRegisterProps } from "./modules";
import { ErrorBoundary } from "./ErrorBoundary";

export const Slot = ({ name }: {name: string}) => {
    const { slots } = useContext(AppContext);
    console.log('slots', slots,name, slots[name])
    return Array.isArray(slots[name]) 
        ? slots[name].map((item: IRegisterProps, index) => {
            console.log(item)
            return <ErrorBoundary key={index} fallback={<p>has error </p>}><item.component {...item.props}/></ErrorBoundary>
        })
        : null
}